<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">

<link rel="import" href="../../elements/som-annotation-manager-behavior.html">

<link rel="import" href="../../elements/som-header-styles.html">
<link rel="import" href="../../elements/som-input-styles.html">
<link rel="import" href="../../elements/som-utility-styles.html">

<link rel="import" href="../../elements/som-alert-item/som-alert-item.html">

<dom-module id="som-alert-category">
  <template>
    <style include="som-header-styles som-input-styles som-utility-styles">
      #categoryAlerts {
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }
      #infraFailureMessage {
        padding: 1em 16px;
        font-size: 1.1em;
        border-bottom: 1px solid #ccc;
      }
      .alert-item {
        box-sizing: border-box;
      }
    </style>
    <h2 class="category-title">
      <span>
        <input type="checkbox" id="checkAll" on-tap="checkAll" class="category-checkbox"
          title="Select all alerts in this category." />
        <span class="category-title-text" title$="[[tooltip]]">
          [[categoryTitle]]
        </span>
        <span class="category-title-count" hidden$="[[!!isResolvedSection]]">
          ([[alerts.length]] total)
        </span>
        (<a href="/help-som" target="_blank">Help?</a>)
      </span>
      <div class="header-buttons">
        <span class="collapse-button" on-tap="_collapseAll">
          <iron-icon icon="remove"></iron-icon> Collapse all
        </span>
        /
        <span class="collapse-button" on-tap="_expandAll">
          <iron-icon icon="add"></iron-icon> Expand all
        </span>
        /
        <span class="collapse-button" on-tap="_toggleCategory">
          <iron-icon id="categoryToggleIcon" icon="[[_toggleIcon]]"></iron-icon>
        </span>
      </div>
    </h2>
    <template is="dom-if" if="[[isInfraFailuresSection]]">
      <div id="infraFailureMessage">
        There are [[alerts.length]] infra failures currently
         affecting your tree. <a href="https://g.co/bugatrooper" target="_blank">Contact a trooper</a>
         for help with these.
        <span class="link" on-tap="_toggleCategory">
          Click here to
          <span hidden$=[[_opened]]>show</span>
          <span hidden$=[[!_opened]]>hide</span>
          the alerts.
        </span>
      </div>
    </template>
    <iron-collapse id="categoryAlerts" opened="[[_opened]]" no-animation>
      <template
          is="dom-repeat"
          items="[[alerts]]"
          as="alert">
        <som-alert-item
            id="alertItem[[index]]"
            class="alert-item"
            tabindex="0"
            alert="[[alert]]"
            tree-name="[[treeName]]"
            annotation="[[computeAnnotation(annotations, alert)]]"
            collapse-by-default="[[collapseByDefault]]"
            link-style="[[linkStyle]]"
            on-checked="_handleChecked"
        ></som-alert-item>
      </template>
    </iron-collapse>
  </template>
  <script src="som-alert-category.js"></script>
</dom-module>
